<template>
    <div class="addProject UserAdd">
        <div class="addForm zll-form">
            <el-form :model="loginData" :rules="rules" ref="addForm" class="demo-ruleForm">
                <el-form-item class="formList" prop="deptId" label="部门：">
					<el-select clearable v-model="loginData.deptId" :disabled="type == 'see'" placeholder="请选择部门">
						<el-option v-for="item in deptList"
								   :key="item.id"
								   :label="item.deptName"
								   :value="item.id" />
					</el-select>
                </el-form-item>
                <el-form-item class="formList" prop="roleId" label="角色：">
					<el-select clearable v-model="loginData.roleId" :disabled="type == 'see'" placeholder="请选择角色">
						<el-option v-for="item in roleList"
								   :key="item.id"
								   :label="item.roleName"
								   :value="item.id" />
					</el-select>
                </el-form-item>
				<el-form-item class="formList" prop="userName" label="姓名：">
					<el-input clearable class="input_right" placeholder="请输入姓名" :disabled="type == 'see'" v-model="loginData.userName"></el-input>
				</el-form-item>
				<el-form-item class="formList" prop="userAccount" label="用户名：">
					<el-input clearable class="input_right" placeholder="请输入用户名" :disabled="type == 'see'" v-model="loginData.userAccount"></el-input>
				</el-form-item>
                <el-form-item class="formList" prop="phone" label="手机号：">
                    <el-input clearable class="input_right" placeholder="请输入手机号" v-model="loginData.phone"></el-input>
                </el-form-item>
				<el-form-item class="formList" prop="workNum" label="工号：">
                    <el-input clearable class="input_right" placeholder="请输入工号" v-model="loginData.workNum"></el-input>
                </el-form-item>
				<el-form-item class="formList" prop="password" label="密码：" v-if="type == 'add'">
					<el-input type="password" clearable class="input_right" placeholder="请输入密码" :disabled="type == 'see'" v-model="loginData.password"></el-input>
				</el-form-item>
				<el-form-item class="formList" prop="checkPass" label="确认密码：" v-if="type == 'add'">
					<el-input type="password" clearable class="input_right" placeholder="请输入确认密码" :disabled="type == 'see'" v-model="loginData.checkPass"></el-input>
				</el-form-item>
                <el-form-item class="formList" prop="accountStatus" label="账号状态：">
					<el-select clearable v-model="loginData.accountStatus" :disabled="type == 'see'" placeholder="请选择状态">
						<el-option label="正常" value="0"></el-option>
						<el-option label="停用" value="1"></el-option>
					</el-select>
                </el-form-item>
				<!--<el-form-item class="formList" prop="accountStatus" label="用户类型：">-->
					<!--<el-select clearable v-model="loginData.appUserType" :disabled="type == 'see'" placeholder="请选择用户类型">-->
						<!--<el-option label="操作工" value="1"></el-option>-->
					<!--</el-select>-->
				<!--</el-form-item>-->
				<el-form-item prop=""  style="margin-bottom: 10px" label="重置密码：" v-if="type == 'edit'">
					<el-input clearable  v-model="loginData.password" type="password" :disabled="type =='edit'"
							  size="mini"
							  style="width: 160px" />
					<img style="cursor: pointer;margin-left: 5px;" src="@/assets/refresh.png" @click="resetPassward"  v-show="loginData.accountStatus !=1">
				</el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
	props:["editData","type","existLogin"],
    data(){
		var notEmpty = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('不能为空'));
			} else {
				callback();
			}
		};

		var phoneValidator = (rule, value, callback) => {
			let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
			if (!value) {
				return callback(new Error('不能为空!'));
			}else if(!reg.test(value)){
				return callback(new Error('手机格式有误！'));
			} else {
				callback();
			}
		};
		var userNameValidator = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('不能为空'));
			} else if(value && value.length > 6){
				return callback(new Error('长度不能超过6'));
			}else {
				callback();
			}
		};
		var validateLogin= (rule, value, callback) => {
			let logins = [];
			if(this.existLogin && this.existLogin.length > 0){
				for(let data of this.existLogin){
					logins.push(data.userAccount);
				}
			}
			if (value === '') {
				callback(new Error('请输入账号'));
			} else if (logins.includes(this.loginData.userAccount) && value != this.copyData.userAccount) {
				callback(new Error('账号已存在!'));
			} else {
				callback();
			}
		};
		var validatePass2 = (rule, value, callback) => {
			if (value !== this.loginData.password) {
				callback(new Error('两次输入密码不一致!'));
			}  else {
				callback();
			}
		};
        return {
			disabled: false,
			rules: {
				deptId: [
					{required: true, message: '请选择部门', trigger: 'change'},
				],
				// phone: [
				// 	{validator: phoneValidator, trigger: 'blur'},
				// ],
				roleId: [
					{required: true, message: '请选择角色', trigger: 'change'},
				],
				userName: [
					{validator: userNameValidator, trigger: 'blur'},
				],
				userAccount: [
					{validator: validateLogin,  trigger: 'blur'},
				],
				accountStatus: [
					{required: true, message: '请选择状态', trigger: 'change'},
				],
				password: [
					{required: true, message: '请输入密码', trigger: 'blur'},
				],
				checkPass: [
					{ validator: validatePass2, trigger: 'blur',required: true }
				]
			},

			loginData:{id:'',phone:'',deptId:"",roleId:"",workNum:"",userName:"",userAccount:"",password:"",accountStatus:"0"},
			count: 0,
			deptList:[],
			roleList:[],
			copyData:{},

			isAppUser:false,
        }
    },
    methods: {

		resetPassward(){
			this.$message.success('密码重置为：1234567');
			this.loginData.password = '1234567';
			this.loginData.resetPwd = '1';
		},

		getDeptList() {
			let self = this;
			self.$http({
				url: "/jinl/dept/queryDeptChooseList",
				method: "post",
			}).then(resp => {
				if (resp.success) {
					if(resp.result.length > 0){
						self.deptList = resp.result;
					}
				}
			});
		},
		getRoleList() {
			let self = this;
			self.$http({
				url: "/jinl/role/getRoleList",
				method: "post",
			}).then(resp => {
				if (resp.success) {
					self.roleList = resp.result;
				}
			});
		},
		changeRole(val){
			for(let role of this.roleList){
				if(role.id == val){
					this.loginData.type = role.roleType;
				}
			}
		},

		submitForm() {
			let self = this;
			this.$refs["addForm"].validate((valid) => {
				if (valid) {
					self.operateUser();
				} else {
					return false;
				}
			});
		},
		operateUser() {
			let self = this;
			let url = this.type == 'add' ? "/jinl/login/addLogin" : "/jinl/login/updateLogin";
			delete self.loginData.createTime;
			delete self.loginData.updateTime;
			let param = Object.assign({},self.loginData);

			if (this.count == 0) {
				self.$http({
					url: url,
					method: "post",
					params: param,
				}).then(resp => {
					if (resp.success) {
						self.$eventBus.$emit("updateLoginList");
						self.$notify({
							title: '提示',
							message: "操作成功！",
							type: 'success'
						});
						self.$refs["addForm"].clearValidate();
						return
					}
					self.$notify({
						title: '提示',
						message: resp.message,
						type: 'error'
					});
					this.count--;
				});
				this.count++;
			}
		},
    },

	watch:{
		editData(val){
			for(let key in this.loginData){
				this.loginData[key] = val[key]||'';
			}
			this.copyData = Object.assign({},val);
			this.count = 0;
		}
	},
    mounted(){
		this.getDeptList();
		this.getRoleList();
    },
    components: {
    }
}
</script>
<style lang="scss" scoped>
    @import "@/style/dialog.scss";
    .UserAdd {
        width: 400px;
        margin: 0 auto;
        .change-password {
            .input_right {
                width: calc(100% - 80px);
            }
            .change-icon {
                width: 80px;
                font-size: 12px;
                text-align: center;
                color: #1890ff;
                display: inline-block;
                cursor: pointer;
                &:hover {
                    opacity: .8;
                }
            }
        }
    }
</style>
